<template>
  <div>
     <!-- 下方导航栏 -->
     <div class="col-md-3">
        <!-- <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo"> -->
        <nav class="navbar  navbar-default navbar-fixed-bottom ">
            <div class="container nav-bottom">
                <button type="button" style="font-size: 18px; color: #2e7ba7;" @click="toHome">
                    <span class="	glyphicon glyphicon-home"></span>
                    <div>主页</div>
                </button>

                <button type="button" style="font-size: 18px; color: #2e7ba7;" @click="toMine">
                    <span class="	glyphicon glyphicon-user"></span>
                    <div>我的</div>
                </button>
            </div>
        </nav>
  </div>

  </div>
</template>

<script>
export default {
  name:'FooterIndex',
  methods:{
    toMine(){
        this.$router.push('mine')
    },
    toHome(){
        this.$router.push('home')
    }
  }

}
</script>

<style scoped>

.navbar-brand {
    position: absolute;
    left: 50%;
    line-height: 50px;
    transform: translate(-50%);
}
/* 手机端导航 */
.navbar-fixed-bottom button {
    border: none;
    outline: none;
    background: none;
}

.navbar-fixed-bottom .nav-bottom {
    position: relative;
}

.navbar-fixed-bottom button:last-child {
    position: absolute;
    right: 5%;
}
</style>